.App {
  width: 100%;
  height: 100%;

  .Appbox {
    margin: auto;
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgb(209, 207, 207);

    .App-header {
      width: 96%;
      height: 10%;
      background-color: rgba(253, 250, 250, 0.555);
      padding: 0 2% 0 2%;
      display: flex;
      justify-content: space-between;
      align-items: center;
     

      .header-left {
        color: black;
        font-size: 30px;
      }
      .header-right{
        font-size: 16px;
       >span:nth-child(2){
         padding: 0 5px 0 5px;
         color: royalblue;
         cursor: pointer;
       }
      }
    }
    .main-content{
      width: 100%;
      height: 90%;
      display: flex;
      border: none;
      .nav{
        margin: 0;
        background-color: #2928288e;
        width: 20%;
        height: 100%;
        list-style-type: none;
        padding:0px;
        .nav-item{
          width: 80%;
          margin: auto;
          padding: 5% 0 5% 0;
          border-bottom: 1px solid #fff;
          &.active{
            color: #2DA7E0;
          }
           .nav-link {
            &.active{
              color: #2DA7E0;
            }
             color: rgb(247, 228, 228);
             text-decoration:none;
             font-size: 20px;
             cursor: pointer;
             &:active{
               color: #2DA7E0;
             }
           }
        }
      }
      >main{
        width: 80%;
        height: 100%;
      }
    }
  }
}